<template>
  <div>
    <el-card shadow="never" class="card">
      
        <el-row style="margin-bottom:10px; margin-top:11px;">
          <el-col :span="21">
              <el-button type="success" size="mini" icon="el-icon-plus"  @click="addCms()">创建</el-button>
              <el-button type="danger" size="mini" icon="el-icon-delete"  @click="deleteMenu()">卸载</el-button>
              <el-button type="warning" size="mini"  icon="el-icon-plus" :disabled="single" @click="field">字段管理</el-button>  
          </el-col>
          <el-col :span="3" style="text-align:right">
            <table-tool  :fieldList="fieldList"  @refesh_list="loadlist"  :searchTool="false" :expand_status="true" :expand="expand" @toggleRowExpansion="toggleRowExpansion"></table-tool>
          </el-col>
        </el-row>
       

        <!--表格数据开始-->
        <el-table  :header-cell-style="{ background: '#eef1f6', color: '#606266' }" v-loading="loading" highlight-current-row :default-expand-all="expand" @current-change="handleCurrentChange" :tree-props="{children: 'children'}" row-key="menu_id" ref="multipleTable" border class="eltable" :data="list"   style="width: 100%"  >
          <el-table-column  property="menu_id" align="center" type='' label="编号" width="70"></el-table-column>
          <el-table-column v-if="fieldList[1].checked"  property="title" width="240" label="模型名称"></el-table-column>
          <el-table-column v-if="fieldList[3].checked" property="table_name" label="数据表名"></el-table-column>
          <el-table-column v-if="fieldList[5].checked" align="center" property="status" label="状态">
            <template slot-scope="scope">
              <el-switch :active-value="1" :inactive-value="0" @change="update(scope.row,'status')" v-model="scope.row.status"></el-switch>
            </template>
          </el-table-column>
          <el-table-column v-if="fieldList[7].checked" width="90" align="center" property="sortid" label="排序">
            <template slot-scope="scope">
              <el-input style="width:60px;" size="mini" placeholder="排序" @blur.stop="update(scope.row,'sortid')" v-model="scope.row.sortid"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作" :fixed="$store.getters.device !== 'mobile'?'right':false" align="center" width="180">
            <template slot-scope="scope">
              <el-button size="mini" @click="editorCms(scope.row)" type="primary" ><i class="el-icon-edit-outline" />修改</el-button>
              <el-button size="mini" @click="deleteMenu(scope.row)" type="danger"><i class="el-icon-delete" />卸载</el-button>
            </template>
          </el-table-column>
        </el-table> 
    </el-card>
    <!--添加-->
    <CmsAdd :show.sync="dialog.addCmsDialogStatus" :list="list"  size="small" @refesh_list="loadlist"></CmsAdd>

    <!--修改-->
    <CmsUpdate :show.sync="dialog.updateCmsDialogStatus" :info="info" :list="list"  size="small" @refesh_list="loadlist"></CmsUpdate>
  </div>
</template>
<script>
import {getMenuList,getMenuInfo,updateMenuExt,deleteMenu} from '../sys'
import TableTool from '@/components/common/TableTool.vue'
import CmsAdd from './cms/Add.vue'
import CmsUpdate from './cms/Update.vue'
import { confirm} from '@/utils/common'
export default {
  name:'Menu',
  components: { CmsAdd,CmsUpdate,TableTool},
  data() {
    return {
      dialog: {
        addCmsDialogStatus : false,
        updateCmsDialogStatus : false,
      },
      expand:true,
      fieldList:[
        {lable:'编号',checked:false},
        {lable:'菜单名称',checked:true},
        {lable:'控制器名',checked:true},
        {lable:'数据表名',checked:true},
        {lable:'生成代码',checked:true},
        {lable:'菜单显示',checked:true},
        {lable:'创建数据库表',checked:true},
        {lable:'排序',checked:true},
      ],
      id:'',
      single:true,
      list: [],
      info:{},
      loading: false,
    };
  },
  methods: {
    addCms() {
       this.dialog.addCmsDialogStatus = true
    },
    editorCms(row) {
      getMenuInfo({menu_id:row.menu_id}).then(res => {
          this.dialog.updateCmsDialogStatus = true
          this.info = res.data
      })
    },
    field(){
      let app_type = this.$route.query.app_type ? this.$route.query.app_type : this.app_type
      this.$router.push({path:'/admin/Field/index.html',query: {app_id:this.app_id,app_type:app_type,menu_id:this.id}})
    },
    handleCurrentChange(val) {
        this.id = val.menu_id
        this.single = false
    },
    toggleRowExpansion(){
      this.expand = !this.expand
      this.list.forEach(item=>{
          this.$refs.multipleTable.toggleRowExpansion(item,this.expand)
      })
    },
    deleteMenu() {
        confirm({content:'确定要卸载吗?'}).then(() => {
            deleteMenu({menu_id:this.id}).then(res => {
              this.$message({message: '操作成功', type: 'success'})
              this.loadlist()
            })
        }).catch(() => {})
    },
    update(row,field){
      updateMenuExt({menu_id:row.menu_id,[field]:row[field]}).then(res => {
          this.$message({message: '操作成功', type: 'success'})
      })
    },
    loadlist() { 
      this.loading = true
      getMenuList({app_id:this.app_id}).then(res => {
          this.list = res.list
          this.loading = false
      })
    },
  },
  mounted() {
    this.loadlist()
  },
};
</script>
<style  lang="scss">
@import '@/assets/scss/common.scss'
</style>